<template>
    <merc-box :lazy="true" v-model="visible" :title="title" :width="900" :padding="5" :height="900"
        :onModelClose="onModelClose">
        <json-viewer :value="jsonData" :expand-depth=5 copyable boxed sort></json-viewer>
        <template #footer>
            <el-button type="primary" size="small" @click="visible = false">确认</el-button>
            <el-button type="default" size="small" @click="visible = false">关闭弹</el-button>
        </template>
    </merc-box>
</template>
<script>
import MercBox from '@/components/basic/MercBox.vue';

import { ref, defineComponent } from 'vue';
import JsonViewer from 'vue-json-viewer'
//import 'vue-json-viewer/style.css'
export default defineComponent({
    data() {
        return {
            visible: false,
            jsonData: {},
            title: "格式化",

        }
    },
    components: {
        MercBox,
        JsonViewer
    },
    methods: {
        show(content, title) {
            this.title = title;
            try {
                this.jsonData = JSON.parse(content);
            }
            catch (err) {
                this.jsonData = content;
            }
            this.visible = true;
        }
    }
});
</script>
  